// 定义常量和全局变量
let stage = null;
const SHEEP_WIDTH = 164;
const TRAN_SPEED = 10;
const SPRIT_SPEED = 70;
let screenWidth = window.innerWidth;

// 监听窗口大小变化
window.addEventListener('resize', () => {
    screenWidth = window.innerWidth;
});

// 定义 Sheep 类
class Sheep {
    constructor() {
        this.tran_y = 0;
        this.sprit_left = 0;
        this.spriptSpeed = SPRIT_SPEED + 20 * Math.random();
        this.tranSpeed = TRAN_SPEED + TRAN_SPEED * Math.random();
        this.tran_x = SHEEP_WIDTH + 400 * Math.random();

        // 创建并初始化 sheepDom 元素
        this.sheepDom = document.createElement("div");
        this.sheepDom.className = "sheep";
        this.sheepDom.style.transform = `translate3d(${this.tran_x}px, 0, 0)`;
        stage.appendChild(this.sheepDom);

        this.spritTop = 0;
        this.catch = false;
        this.x = 0;
        this.y = 0;

        this.initEvents();
    }

    initEvents() {
        // 初始化事件监听器
        this.sheepDom.addEventListener('mousedown', this.onMouseDown.bind(this));
        this.sheepDom.addEventListener('mouseup', this.onMouseUp.bind(this));
        this.sheepDom.addEventListener('mouseout', this.onMouseOut.bind(this));
        this.sheepDom.addEventListener('mousemove', this.onMouseMove.bind(this));
    }

    onMouseDown(event) {
        this.spritTop = -128;
        this.tranSpeed = 0;
        this.catch = true;
        this.x = event.pageX;
        this.y = event.pageY;
    }

    onMouseUp() {
        if (this.catch) {
            this.spritTop = 0;
            this.tranSpeed = TRAN_SPEED + TRAN_SPEED * Math.random();
            this.catch = false;
            this.tran_y = 0;
        }
    }

    onMouseOut() {
        if (this.catch) {
            this.onMouseUp();
        }
    }

    onMouseMove(event) {
        if (this.catch) {
            this.tran_x += event.pageX - this.x;
            this.tran_y += event.pageY - this.y;
            this.sheepDom.style.transform = `translate3d(${this.tran_x}px, ${this.tran_y}px, 0)`;
            this.x = event.pageX;
            this.y = event.pageY;
        }
    }

    startMovement() {
        this.spritInterval = setInterval(this.spritMove.bind(this), this.spriptSpeed);
        this.walkInterval = setInterval(this.walkMove.bind(this), this.spriptSpeed);
    }

    spritMove() {
        if (this.sprit_left < SHEEP_WIDTH * 7) {
            this.sprit_left += SHEEP_WIDTH;
        } else {
            this.sprit_left = 0;
        }
        this.sheepDom.style.backgroundPosition = `-${this.sprit_left}px ${this.spritTop}px`;
    }

    walkMove() {
        this.sheepDom.style.transform = `translate3d(${this.tran_x}px, ${this.tran_y}px, 0)`;
        if (this.tran_x > -(screenWidth + SHEEP_WIDTH + 100)) {
            this.tran_x -= this.tranSpeed;
        } else {
            clearInterval(this.walkInterval);
            clearInterval(this.spritInterval);
            stage.removeChild(this.sheepDom);
            this.sheepDom = null;
        }
    }
}

// 创建小羊的函数
export function createSheep() {
    stage = document.getElementById("stage")
    const sheeps = [...stage.children];
    if (sheeps.length >= 10) return;

    const sheep = new Sheep();
    sheep.startMovement();
}

